<template>
	<view class="p-bot30">

		<image :src="$staticImg('loginBg1.png')" mode="widthFix" class="rows"></image>

		<view class="content ">
			<view class="list bot">
				<image :src="$staticImg('l1.png')" class="icon"></image>
				<input type="number" class="flex-1 p-left20 height black size28" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="list bot">
				<image :src="$staticImg('l2.png')" class="icon"></image>
				<input type="text" v-model="password" class="flex-1 p-left20 height black size28"
					placeholder="请设置登录密码" />

			</view>
			<view class="list bot">
				<image :src="$staticImg('l3.png')" class="icon"></image>
				<input type="text" v-model="v_password" class="flex-1 p-left20 height black size28"
					placeholder="请设置支付密码" />

			</view>
			<view class="list bot">
				<image :src="$staticImg('l4.png')" class="icon"></image>
				<input type="number" v-model="verCode" class="flex-1 p-left20 height black size28"
					placeholder="请输入验证码" />
				<text class="color h6 height d-flex a-center " :class="{'opacity08':!codeStart}"
					@click="getCode">{{codeStart?'获取验证码':`重新发送 (${downTime}s)`}}</text>

			</view>
			<view class="list bot">
				<image :src="$staticImg('l5.png')" class="icon"></image>
				<input type="text" v-model="share_v_id" class="flex-1 p-left20 height black size28"
					placeholder="请输入邀请码" />

			</view>







			<view class="row m-top30" @click="agree = !agree" v-if="regInfo">
				<view class="dot flexac" :class="{'active':agree}">
					<view class="iconfont icon-xuanzhong white h7"></view>
				</view>
				<text class="h6 color_99 m-left10">我已阅读并同意</text>
				<text class="h6 color" v-for="(item,index) in regInfo.agreement" :key="index"
					@click.stop="toUrl(`/pages/details/details?id=${item.id}`)">
					《{{item.title}}》
				</text>

			</view>

			<view class="loginBtn m-top60 m-bot40 flexac" @click="LoginBtn">注册</view>



			<view class="row j-centert m-top40" >
				<view class="d-flex a-center h6" @click="Download">
					<text class="color_33">已有账号？</text>
					<text class="color">去下载APP</text>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				agree: false,
				phone: '',
				password: '',
				v_password: '',
				verCode: '',
				share_v_id: '',
				downState: null,
				downTime: 60,
				codeFlag: true,
				codeStart: true,
				regInfo: '',
				startUpData:'',
			}
		},
		onLoad(opt) {
			if (opt.share_v_id) this.share_v_id = opt.share_v_id;
			this.startUp();
		},
		
		methods: {
			...mapMutations(['getUser']),
			getCode() {
				let that = this;
				if (!that.phone) return that.$Toast('请输入手机号码~');
				if (!that.$reg.phone.test(that.phone) && that.phone) return that.$Toast('手机号码输入有误~');
				if (!that.codeFlag) return;
				that.codeFlag = false;
				that.$showLoading('');
				that.$http.post({
					url: '/zzj_singleSaleApi/verCode',
					data: {
						phone: that.phone
					}
				}).then(res => {
					that.$hideLoading();
					if (res.errcode != '00000') {
						that.$Toast(res.msg);
						that.codeFlag = true;
						return;
					}
					that.codeStart = false;
					that.downState = setInterval(() => {
						if (that.downTime > 1) {
							that.downTime--;
						} else {
							clearTimeout(that.downState);
							that.codeFlag = true;
							that.codeStart = true;
							that.downTime = 60;
						}
					}, 1000)
				})
			},
			LoginBtn() {
				let that = this;
				if (!this.phone) return this.$Toast('请输入手机号码~');
				if (!this.$reg.phone.test(this.phone) && this.phone) return this.$Toast('手机号码输入有误~');
				if (!this.password) return this.$Toast('请输入登录密码~');
				if (this.password.length < 6 || this.password.length > 10) return this.$Toast('登录密码长度为6-10位~');
				if (!this.v_password) return this.$Toast('请输入支付密码~');
				if (this.v_password.length < 6 || this.v_password.length > 10) return this.$Toast('支付密码长度为6-10位~');
				if (!this.agree) return this.$Toast('未同意协议~');
				this.$http.post({
					url: '/zzj_singleSaleApi/fastApp',
					data: {
						openid: this.phone,
						phone: this.phone,
						password: this.password,
						v_password: this.v_password,
						verCode: this.verCode,
						share_v_id: this.share_v_id,
					}
				}).then(res => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					let obj = {
						vid: res.v_id
					}
					this.getUser(obj);
					that.$Modal('注册成功','立即下载App').then(res=>{
						window.location.href = that.startUpData.download;
					})
					
				})
			},

			startUp() {
				this.$http.post({
					url: '/zzj_singleSaleApi/startUp',
				}).then(res => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					let result = res.data;
					this.startUpData = res;
					this.regInfo = result.regInfo;
				})
			},
			
			Download(){
				window.location.href = this.startUpData.download;
				
			}
		},
		computed: {
			...mapState(['color']),
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 600rpx;
		margin: 50rpx auto 0;
		padding: 30rpx;

		border-radius: 30rpx;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.24);
	}

	.list {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.icon {
		width: 42rpx;
		height: 42rpx;
	}

	.dot {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 1rpx solid #ccc;
	}

	.active {
		background-color: $color;
		border: 1rpx solid $color;
	}

	.loginBtn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(90deg, #67A4FF 0%, #287AF5 100%);
		border-radius: 45rpx;
		color: #ffffff;
		font-size: 28rpx;
	}
</style>